<template>
  <!-- 输入框组件 -->

  <!-- 用户输入框容器 -->
  <div class="inputBox">
    <input
      v-model="inputVal"
      :type="type"
      :placeholder="textPlaceholder"
      :class="{error:!isValid}"
      @blur="showTips"
    />
  </div>
</template>

<script>
export default {
  //接受父传子数据
  props: ["textPlaceholder", "type", "rule", "err_msg"],
  //组件数据
  data() {
    return {
      //输入框输入的数据
      inputVal: "",
      //
      isValid: true
    };
  },
  //组件方法
  methods: {
    //输入错误，提示
    showTips() {
      //当this.isValid=false时触发
      if (!this.isValid) {
        // this.$toast.fail(this.err_msg);
      }
    }
  },
  //监听器
  watch: {
    inputVal(newVal) {
      //创建正则表达式
      //new RegExp生成正则自带 （//）
      const regExp = new RegExp(this.rule);
      //err_msg：错误提示信息
      const err_msg = this.err_msg;
      //test()正则表达式检验方法
      const isValid = regExp.test(newVal);
      this.isValid = isValid;
      if (!isValid) {
        console.log(err_msg);
      }
      //2.每当数据变化时，应该通知父组件
      this.$emit("valChange", newVal);
    }
  }
};
</script>

<style lang="less">
/* 样式初始化 */
* {
  padding: 0;
  margin: 0;
}
a {
  font-size: 5.556vw;
  color: darkseagreen;
}
a:hover {
  color: deeppink;
  text-decoration: none;
}
ol,
ul,
li {
  list-style: none;
}
/* 输入框盒子 */
.inputBox {
  margin: 3vw;
  padding: 0 3.333vw;
  height: 13.889vw;
  line-height: 13.889vw;
  text-align: center;
  input {
    font-size: 4.444vw;
    padding-bottom: 2.778vw;
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
  }
  //输入框错误红色底边框
  .error {
    border-bottom-color: red;
  }
}
</style>